<template>
  <div class="category-products-wrapper">
    <div class="products-section">
      <div class="products-header">
        <h2 class="products-title">{{ categoryInfo?.name ? categoryInfo.name + ' · 商品列表' : '商品列表' }}</h2>
        <el-button 
          type="primary" 
          icon="el-icon-refresh" 
          :loading="productsLoading"
          @click="refreshProducts"
          class="refresh-btn">
          刷新商品
        </el-button>
      </div>
      <el-row :gutter="32" v-loading="productsLoading">
        <el-col :span="6" v-for="product in products" :key="product.productId">
          <el-card class="product-card" :body-style="{ padding: '0px', background: '#fff' }">
            <div class="product-image-box">
              <img :src="getProductImage(product)" class="product-image">
            </div>
            <div class="product-info">
              <h3 class="product-title">{{ product.title }}</h3>
              <div class="product-meta">
                <span class="publisher">发布者: {{ product.userNickname }}</span>
              </div>
              <div class="product-bottom">
                <span class="price">¥{{ product.price }}</span>
                <span class="product-status" :class="getStatusClass(product.status)">{{ product.status }}</span>
              </div>
              <el-button type="primary" size="mini" @click.stop="goToDetail(product.productId)" class="detail-btn">查看详细</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="!productsLoading && products.length === 0" class="empty-container">
        <el-empty description="该分类下暂无商品"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import CategoryService from '@/Services/CategoryService'
import ProductService from '@/Services/ProductService'

export default {
  name: 'CategoryView',
  data() {
    return {
      categoryInfo: null,
      loading: false,
      error: null,
      products: [],
      productsLoading: false
    }
  },
  watch: {
    // 监听路由参数变化
    '$route.params.id': {
      immediate: true,
      handler(newId) {
        if (newId) {
          this.fetchCategoryInfo(newId)
          this.fetchCategoryProducts(newId)
        }
      }
    }
  },
  methods: {
    async fetchCategoryInfo(categoryId) {
      this.loading = true
      this.error = null
      try {
        const response = await CategoryService.GetById(categoryId)
        if (response && response.$values) {
          this.categoryInfo = response.$values
        } else {
          this.categoryInfo = response
        }
      } catch (error) {
        console.error('获取分类信息失败:', error)
        this.error = '获取分类信息失败，请稍后重试'
        this.categoryInfo = null
      } finally {
        this.loading = false
      }
    },
    async fetchCategoryProducts(categoryId) {
      this.productsLoading = true
      try {
        const response = await ProductService.GetByCategory(categoryId)
        if (response && response.data) {
          this.products = Array.isArray(response.data) ? response.data : response.data.$values || []
        } else {
          this.products = []
          this.$message.warning('该分类下暂无商品')
        }
      } catch (error) {
        console.error('获取分类商品失败:', error)
        this.$message.error('获取分类商品失败')
        this.products = []
      } finally {
        this.productsLoading = false
      }
    },
    async refreshProducts() {
      if (this.productsLoading) return
      await this.fetchCategoryProducts(this.$route.params.id)
    },
    getProductImage(product) {
      if (product.imageBase64) {
        return `data:image/jpeg;base64,${product.imageBase64}`
      }
      return 'https://picsum.photos/300/200?random=' + Math.random()
    },
    getStatusClass(status) {
      switch (status) {
        case '在售':
          return 'status-onsale'
        case '已售出':
          return 'status-sold'
        case '已下架':
          return 'status-offline'
        default:
          return ''
      }
    },
    goToDetail(id) {
      this.$router.push({ name: 'ProductDetail', params: { id } })
    }
  }
}
</script>

<style scoped>
.category-products-wrapper {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 40px 0 60px 0;
}
.products-section {
  max-width: 1300px;
  margin: 0 auto;
  background: transparent;
}
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.products-title {
  font-size: 30px;
  color: #222;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
}
.refresh-btn {
  background-color: #ffd700;
  color: #333;
  border-radius: 8px;
  font-weight: 600;
  border: none;
}
.product-card {
  margin-bottom: 32px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
  border: none;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
.product-image-box {
  width: 100%;
  height: 220px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
}
.product-image {
  max-width: 90%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent;
}
.product-info {
  padding: 18px 18px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-title {
  font-size: 18px;
  color: #222;
  font-weight: 600;
  margin: 0 0 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.product-meta {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
  width: 100%;
}
.publisher {
  color: #888;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}
.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}
.product-status {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 6px;
  margin-left: 8px;
  display: inline-block;
  font-weight: 500;
}
.status-onsale {
  background-color: #67C23A;
  color: white;
}
.status-sold {
  background-color: #F56C6C;
  color: white;
}
.status-offline {
  background-color: #909399;
  color: white;
}
.detail-btn {
  width: 100%;
  margin-top: 4px;
  border-radius: 8px;
  font-weight: 600;
}
.empty-container {
  padding: 40px;
  text-align: center;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}
</style> 